<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>普通用户界面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh; /* 页面高度 */
            background-color: #f9f9f9;
        }

        /* 左侧侧边栏 */
        .sidebar {
            width: 200px;
            background-color: #333;
            color: white;
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }
        .sidebar h2 {
            margin: 0 0 20px;
            font-size: 20px;
        }
        .sidebar a {
            color: white;
            text-decoration: none;
            margin: 10px 0;
            padding: 10px;
            border-radius: 5px;
            display: block;
            background-color: #444;
        }
        .sidebar a:hover {
            background-color: #4CAF50;
        }

        /* 右侧内容区域 */
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 20px;
            flex: 1;
        }
        .section {
            position: relative;
            flex: 1 1 45%; /* 每个区域占宽度45%，留出间距 */
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            height: 200px; /* 固定高度：适合6行内容 */
            overflow: hidden; /* 超出内容隐藏 */
        }
        .section h2 {
            margin: 0 0 10px;
            font-size: 18px;
            color: #333;
        }
        .section ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .section ul li {
            margin-bottom: 10px;
            color: #555;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; /* 文本溢出显示省略号 */
        }
        .more-btn {
            position: absolute;
            top: 10px; /* 距顶部 10px */
            right: 10px; /* 距右侧 10px */
            padding: 5px 10px;
            background-color: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 12px;
        }
        .more-btn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<!-- 左侧侧边栏 -->
<div class="sidebar">
    <h2>功能导航</h2>
    <a href="/interactiveFeature">互动功能</a>
    <a href="/login">登录</a>
    <a href="/logout">退出登录</a>
</div>

<!-- 右侧内容区域 -->
<div class="container">
    <!-- 团队简介 -->
    <div class="section">
        <a class="more-btn" href="/viewTeams">查看更多</a>
        <h2>团队简介</h2>
        <p><strong>团队名称：</strong> ${team.teamName}</p>
        <p><strong>研究方向：</strong> ${team.researchField}</p>
        <p><strong>简介：</strong> ${team.description}</p>
    </div>

    <!-- 文章 -->
    <div class="section">
        <a class="more-btn" href="/articles/list/1">查看更多</a>
        <h2>文章</h2>
        <ul>
            <c:forEach var="article" items="${articles}">
                <li>
                    <a href="/articles/${article.articleId}/details">${article.title}</a>
                    <div class="publish-date">发表日期：${article.publishDate}</div>
                </li>
            </c:forEach>
        </ul>
    </div>

    <!-- 专著 -->
    <div class="section">
        <a class="more-btn" href="/achievements/list/1?category=0">查看更多</a>
        <h2>专著</h2>
        <ul>
            <c:forEach var="book" items="${books}">
                <li>
                    <a href="/achievements/${book.achievementId}/details">${book.title}</a>
                    <div>创建日期：${book.creationTime}</div>
                </li>
            </c:forEach>
        </ul>
    </div>

    <!-- 专利 -->
    <div class="section">
        <a class="more-btn" href="/achievements/list/1?category=1">查看更多</a>
        <h2>专利</h2>
        <ul>
            <c:forEach var="patent" items="${patents}">
                <li>
                    <a href="/achievements/${patent.achievementId}/details">${patent.title}</a>
                    <div>创建日期：${patent.creationTime}</div>
                </li>
            </c:forEach>
        </ul>
    </div>

    <!-- 软著 -->
    <div class="section">
        <a class="more-btn" href="/achievements/list/1?category=2">查看更多</a>
        <h2>软著</h2>
        <ul>
            <c:forEach var="software" items="${softwareAchievements}">
                <li>
                    <a href="/achievements/${software.achievementId}/details">${software.title}</a>
                    <div>创建日期：${software.creationTime}</div>
                </li>
            </c:forEach>
        </ul>
    </div>

    <!-- 产品 -->
    <div class="section">
        <a class="more-btn" href="/achievements/list/1?category=3">查看更多</a>
        <h2>产品</h2>
        <ul>
            <c:forEach var="product" items="${products}">
                <li>
                    <a href="/achievements/${product.achievementId}/details">${product.title}</a>
                    <div>创建日期：${product.creationTime}</div>
                </li>
            </c:forEach>
        </ul>
    </div>
</div>
</body>
</html>

